<template>
    <header>
        <div>
            <span>支出类型:</span>
            <el-select v-model="para.typeId" class="m-2" placeholder="收入类型">
                <el-option v-for="item in IncomeType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div>
            <span>支出方式:</span>
            <el-select v-model="para.modeId" class="m-3" placeholder="收入方式">
                <el-option v-for="item in IncomeMode" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>

        <div>
            <span class="demonstration">选择开始日期</span>
            <el-date-picker v-model="para.startTime" type="date" value-format="YYYY-MM-DD" placeholder="开始日期"
                :disabled-date="SdisabledDate" :shortcuts="shortcuts" />
            <span class="demonstration">选择截止日期</span>
            <el-date-picker v-model="para.endTime" type="date" value-format="YYYY-MM-D" placeholder="截止日期"
                :disabled-date="EdisabledDate" :shortcuts="shortcuts" />
        </div>
        <div>
            <el-button @click="getList" round>查询</el-button>
            <el-button @click="createObj" round>添加</el-button>
        </div>
    </header>

    <main>
        <el-table :data="incomeDetaildata" style="width: 100%">
            <el-table-column fixed prop="userName" label="姓名" width="80" />
            <el-table-column prop="typeName" label="支出类型" width="80" />
            <el-table-column prop="modeName" label="支出方式" width="80" />
            <el-table-column prop="money" label="金额" width="80" />
            <el-table-column prop="cardName" label="银行卡" width="100" />
            <el-table-column prop="date" label="录入日期" width="150"/>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="delOpen(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </main>

    <footer>
        <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
            :page-sizes="[5, 10, 50, 200]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
            @size-change="getList" @current-change="getList" />
    </footer>

    <el-dialog v-model="showDialog">
        <div>
            <span>金额:</span>
            <el-input v-model="obj.money"></el-input>
        </div>
        <div>
            <span>支出类型:</span>
            <el-select v-model="obj.typeId" class="show" placeholder="收入类型" size="large" >
                <el-option v-for="item in IncomeType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div>
            <span>支出方式:</span>
            <el-select v-model="obj.modeId" @change="bankCard" class="show" placeholder="收入方式" size="large" >
                <el-option v-for="item in IncomeMode" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div v-show="showCard">
            <span>卡号:</span>
            <el-select v-model="obj.cardId" class="show" placeholder="收入方式" size="large" >
                <el-option v-for="item in Cards" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div>
            <button @click="insertData">提交</button>
        </div>
    </el-dialog>
    <el-dialog v-model="showModifyDialog">
        <div>
            <span>金额:</span>
            <el-input v-model="obj.money"></el-input>
        </div>
        <div >
            <span>收入类型:</span>
            <el-input v-model="obj.typeName" readonly></el-input>
        </div>
        <div>
            <span>收入方式:</span>
            <el-input v-model="obj.modeName" readonly></el-input>
        </div>
        <div>
            <span>卡号:</span>
            <el-input v-model="obj.cardName" readonly></el-input>
        </div>
        <div>
            <button @click="insertData">提交</button>
        </div>
    </el-dialog>
</template>
<script  setup>


import axios from 'axios';
import { onMounted, ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const input = ref('')
const BANK ="3";

const SdisabledDate = (time) => {
    return time.getTime() > Date.now()
}

const EdisabledDate = (time) => {
    return time.getTime() < para.value.startTime || time.getTime() > Date.now()
}
//类型下拉选择
const IncomeType = ref([])

//方式下拉选择
const IncomeMode = ref([])

//银行卡下拉选择
const Cards = ref([])

//是否显示银行卡选择框
const showCard = ref(false)

//选择银行卡时，显示银行卡下拉选择
const bankCard = ()=>{
    showCard.value = obj.value.modeId==BANK
}

//获取收入类型列表
const selectIncomeType = () => {
    axios({
        method: "POST",
        url: "/api/expendDetail/selectExpendType",
    }).then((resp) => {
        if (resp.data.code === 200) {
            IncomeType.value = resp.data.data;
        }
    })
}

//获取收入方式列表
const selectIncomeMode = () => {
    axios({
        method: "POST",
        url: "/api/incomeDetail/selectIncomeMode",
    }).then((resp) => {
        if (resp.data.code === 200) {
            IncomeMode.value = resp.data.data;
        }
    })
}
//获取银行卡下拉列表
const selectCard = () => {
    axios({
        method: "POST",
        url: "/api/card/select",
    }).then((resp) => {
        if (resp.data.code === 200) {
            Cards.value = resp.data.data;
        }
    })
}

//user表数据
const incomeDetaildata = ref([])
//数据
const para = ref({
    userName: null,
    typeId: null,
    modeId:null,
    cardName:null,
    cardId:null,
    startTime: null,
    endTime: null,
    modeName:null
})

//是否对对象修改过
const isUpdate = ref(false);
//是否弹窗
const showDialog = ref(false)
const showModifyDialog = ref(false)
//分页请求
const pageInfo = reactive({
    pageNum: 1,
    pageSize: 5,
    total: 0
});
//obj对象
const obj = ref({
    userName: null,
    typeId: null,
    cardId:null,
    modeId:null,
    money: null,
    date: null,
    state: null,
})
//创建对象,弹窗
const createObj = () => {
    obj.value.id = null;
    obj.value.userid = null;
    obj.value.typeId = null;
    obj.value.money = null;
    obj.value.modeId = null;
    obj.value.cardId =null;
    obj.value.cardName= null;

    selectCard();
    showCard.value = false;
    
    showDialog.value = true;
}

// vue的刷新方法
onMounted(() => {
    getList();
    selectIncomeType();
    selectIncomeMode();
})

//提交动作
const insertData = () => {
    const axiosPara = {
        data: obj.value
    };
    if (isUpdate.value) {
        axiosPara.method = "PATCH";
        axiosPara.url = "/api/expendDetail/modify";
    } else {
        axiosPara.method = "POST";
        axiosPara.url = "/api/expendDetail/create";
    }
    console.log(obj.value)
    axios(axiosPara).then((resp) => {
        if (resp.data.code === 200) {
            resp.userId = obj.value.userId;
            resp.phone = obj.value.phone;
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            getList();
        }
    });
}
//删除
const handleDelete = (row) => {
    console.log(row)
    axios({
        url: "api/expendDetail/delete/" + row.id,
        method: "delete"
    }).then((resp) => {
        if (resp.data.code === 200) {
            getList();
        }
    })
};
//修改
const handleEdit = (row) => {
    obj.value.id = row.id;
    obj.value.userId = row.userId;
    obj.value.typeId = row.typeId;
    obj.value.modeId = row.modeId;
    obj.value.date = row.date;
    obj.value.money = row.money;
    obj.value.state = row.state;
    obj.value.typeName = row.typeName;
    obj.value.modeName = row.modeName;
    obj.value.cardName = row.cardName;
    obj.value.cardId = row.cardId;

    showModifyDialog.value = true;
    isUpdate.value = true;
};


//查询
let getList = () => {
    console.log(para.value)
    axios({
        method: "Post",
        url: "/api/expendDetail/list",
        data: {
            ...para.value,
            ...pageInfo
        }
    }).then((resp) => {
        if (resp.data.code === 200) {
            incomeDetaildata.value = resp.data.data.list;
            pageInfo.total = resp.data.data.count;
            console.log(resp.data);
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常", resp)
        }
    }).catch((e) => {
        console.log("出现异常：", e)
    })
}
//删除动作弹窗
const delOpen = (row) => {
    ElMessageBox.confirm(
        '确认删除',
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {
            handleDelete(row)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除失败',
            })
        })
}

</script>

<style scoped></style>